<template>
    <div class="content">
        <div
            v-for="(item, i) in tabs"
            :key="i"
            :style="{
                color: i == index ? '#2189fb' : '#415058',
                'padding-bottom': '5px',
                'border-bottom': i === index ? '2px solid #2189fb' : ''
            }"
            @click="onTap(i)"
        >
            <text> {{ item }}</text>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'
// tabs: ['tab1', 'tab2', 'tab3']
// onTap: function( index:number){}
// index: number
const props = defineProps(['tabs', 'onTap', 'index'])

// const tabsText = JSON.stringify(props.tabs)
console.log('tabbar props', props.tabs)
</script>

<style scoped>
.content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
</style>